<template>
  <div class="right">
    <component :is="config.c1 ? config.c1 : 'jyhnzwzzqk'" :info="info" show @onClick="handleClick('c1', config.c1)" />
    <component :is="config.c2 ? config.c2 : 'lnzzqst'" :info="info" show @onClick="handleClick('c2', config.c2)" />
    <component :is="config.c3 ? config.c3 : 'ptfwsj'" :info="info" show @onClick="handleClick('c3', config.c3)" />

    <visualization-dialog
      :visible.sync="dialogVisible"
      card-size="1"
      :info="info"
      :name="name"
      :component-name="componentName"
      @onChange="handleUpdate"
    />
  </div>
</template>

<script>
import Zl from '@/views/agriculture/components/Zl'
import Cbjtqk from '@/views/agriculture/components/Cbjtqk'
import Jyhqk from '@/views/agriculture/components/Jyhqk'
import Fwzx from '@/views/agriculture/components/Fwzx'
import Jyhnzwzzqk from '@/views/agriculture/components/Jyhnzwzzqk'
import Lnzzqst from '@/views/agriculture/components/Lnzzqst'
import Ptfwsj from '@/views/agriculture/components/Ptfwsj'
import VisualizationDialog from '@/views/agriculture/components/VisualizationDialog'
import agricultureApi from '@/api/agriculture'

export default {
  components: { Zl, Cbjtqk, Jyhqk, Fwzx, Jyhnzwzzqk, Lnzzqst, Ptfwsj, VisualizationDialog },
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    config: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      name: '',
      componentName: ''
    }
  },
  methods: {
    handleClick(name, componentName) {
      this.name = name
      this.componentName = componentName
      this.dialogVisible = true
    },
    handleUpdate(value) {
      agricultureApi.personalEdit({ templateConfig: value, visualizationType: 100 }).then((res) => {
        this.dialogVisible = false
        this.$message.success('修改成功')
        this.$emit('onChange')
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>